<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="GB18030">
<head>
    <meta charset="GB18030">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/ "/>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>

<%--    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>--%>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

<%--引入layer--%>
    <script src="layer/layer.js"></script>



    <script type="text/javascript">


        $(function () {
            var isFirst = true;
            <c:if test="${!empty isFirst}">
            isFirst = false;
            </c:if>
            if (isFirst==true){
                location.href="userController?function=userPageServlet&currentPage=1"
            }

            /*给删除按钮绑定单击函数*/
            $("#delete").click(function () {
                //获取当前行
                var currentRow = $(this).closest("tr");
                //获得当前行第一个td值，即用户id
                var userid = currentRow.find("td:eq(0)").text();
                console.log(userid)
                // 发送ajax请求
                $.ajax({
                    "url": "userController",
                    "type": "post",
                    "data": {
                        "function": "deleteUser",// 指定哪个方法来处理
                        "userid": userid,

                    },
                    "dataType": "text",
                    "success": function (response) {

                        console.log(response)
                        var result = response.result;
                        if (result == "FAILED") {
                            layer.msg(response.message)
                        } else if (result == "SUCCESS") {
                            // 跳转
                            location.href = "deleteSuccess.jsp";
                        }
                    },
                    "error": function (response) {
                        // 显示错误状态码和文本信息
                        layer.msg(response.status + " " + response.statusText)
                    }
                });
                return false;
            });
        });

    </script>
</head>

<body>

<%@include file="common-fluid.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@ include file="common-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" id="delSelected" class="btn btn-danger" style="float:right;margin-left:10px;">
                        <i
                                class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='add.jsp'"><i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">

                        <form id="form1" action="upload" method="get">
                            <table class="table  table-bordered">
                                <thead>
                                <tr>
                                    <th width="30">#</th>
                                    <th width="30"><input type="checkbox" id="firstCb"></th>
                                    <th>账号</th>
                                    <th>名称</th>
                                    <th>邮箱地址</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody>


                                <%--                                //分页展示--%>
                                <%--                                <%--%>
                                <%--                                    request.setCharacterEncoding("UTF-8");--%>
                                <%--                                    //获取当前页数，首次进入时start为0，点击超链接时获取start页数--%>
                                <%--                                    int start = request.getParameter("start") == null ? 0 : Integer.parseInt(request.getParameter("start"));--%>
                                <%--                                    //通过page实现类获得总页数，这里的16为每页数目--%>
                                <%--                                    int pageSize = 16;--%>
                                <%--                                    int totalPage = pg2.getTotalPage(pageSize);--%>
                                <%--                                    //前一页页数、后一页变量值--%>
                                <%--                                    int prePage = start - 1 > 0 ? start - 1 : start + 1;--%>
                                <%--                                    int nextPage = start + 1 < totalPage ? start + 1 : totalPage - 1;--%>
                                <%--                                    //使用request.setAttribute方法便于页面中使用el语法--%>
                                <%--                                    request.setAttribute("totalPage", totalPage);--%>
                                <%--                                    request.setAttribute("prePage", prePage);--%>
                                <%--                                    request.setAttribute("nextPage", nextPage);--%>
                                <%--                                    //获得当前页的数据--%>
                                <%--                                    Page pg1 = new Page(start, pageSize);--%>
                                <%--                                    List<User> currentUser = (List<User>) user1.queryUserByPage(pg1);--%>
                                <%--                                    //遍历显示--%>
                                <%--                                    for (User userlist : currentUser) {--%>
                                <%--                                %>--%>
                                <%--                                <%--%>
                                <%--                                    request.setCharacterEncoding("UTF-8");--%>
                                <%--                                    //List<User> currentUser=(List<User>) session.getAttribute("userList");--%>

                                <%--                                    List<User> currentUser= new ArrayList<>();--%>
                                <%--                                    currentUser.add(new User());--%>
                                <%--//                                    List<User> currentUser= null;--%>


                                <%--                                    //遍历显示--%>
                                <%--                                    for(User userlist:currentUser){--%>
                                <%--                                %>--%>
                                <c:forEach var="user" items="${userList}">
                                    <tr>
                                        <td>${user.userId}</td>
                                        <td><input type="checkbox" name="uid"></td>
                                        <td >${user.userAcct}</td>
                                        <td>${user.username}</td>
                                        <td>${user.email}</td>
                                        <td hidden="hidden">${user.age}</td>
                                        <td hidden="hidden">${user.phone}</td>
                                        <td hidden="hidden">${user.gender}</td>
                                        <td hidden="hidden">${user.roleName}</td>
                                        <td>
                                            <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#userModal">
                                                <i class=" glyphicon glyphicon-check"></i>
                                            </button>

                                            <!-- 模态框（Modal） -->
                                            <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                            <h4 class="modal-title" id="myModalLabel">用户详情</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <table class="table table-striped">
                                                                <tr>
                                                                    <td>用户编号</td>
                                                                    <td><input type="text" id="uId" name="uId" class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>用户名</td>
                                                                    <td><input type="text" id="account" name="account" class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>名称</td>
                                                                    <td><input type="text" id="name" name="name"class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>角色</td>
                                                                    <td><input type="text" id="roleName" name="roleName"class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>电子邮箱</td>
                                                                    <td><input type="text" id="email" name="email"class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>年龄</td>
                                                                    <td><input type="text" id="age" name="age"class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>电话</td>
                                                                    <td><input type="text" id="phone" name="phone"class="form-control" readonly/></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>性别</td>
                                                                    <td><input type="text" id="gender" name="gender"class="form-control" readonly/></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                                </div><!-- /.modal -->
                                            </div><!-- /.modal -->

                                            <button type="button" class="btn btn-primary btn-xs"><i
                                                    class=" glyphicon glyphicon-pencil" onclick="window.location.href = 'edit.jsp?userAcct=${user.userAcct}&password=${user.password}&username=${user.username}&age=${user.age}&email=${user.email}&phone=${user.phone}&gender=${user.gender}'"></i></button>
                                            <button type="button" class="btn btn-danger btn-xs"><i
                                                    class=" glyphicon glyphicon-remove"></i></button>
                                        </td>
                                    </tr>

                                </c:forEach>

                                </tbody>


                                <tfoot>
                                <tr>
                                    <td colspan="6" align="center">

                                        <ul class="pagination">
                                            <%--<li class="disabled">--%>
                                            <li ><a href="userController?function=userPageServlet&currentPage=1"> 首页</a>
                                            </li>
                                            <li>
                                                <a href="userController?function=userPageServlet&currentPage=${requestScope.prePage }">上一页<span
                                                        class="sr-only">(current)</span></a>
                                            </li>

                                            <li>
                                                <a href="userController?function=userPageServlet&currentPage=${requestScope.nextPage}">下一页</a>
                                            </li>
                                            <li>
                                                <a href="userController?function=userPageServlet&currentPage=${requestScope.totalPage} ">尾页</a>
                                            </li>
                                        </ul>

                                        <p>第 <a href="">${requestScope.currentPage}</a>  页</p>

                                    </td>
                                </tr>

                                </tfoot>
                            </table>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    // $("tbody .btn-success").click(function () {
    //     window.location.href = "assignRole.html";
    // });

    $('#userModal').on('show.bs.modal', function (event) {
        $("textarea[name = refuseTextareaContext]").innerHTML = "";
        var btnThis = $(event.relatedTarget); //触发事件的按钮
        var modal = $(this);  //当前模态框
        var modalId = btnThis.data('id');   //解析出data-id的内容
        currentDataId = btnThis.closest('tr').find('td').eq(0).text(); //获取a标签所在行的某一列的内容,eq括号里面的数值表示列数
        $("#uId").val(currentDataId); // 设置模态框里id为cId的组件的值为currentDataId
        currentDataAcct = btnThis.closest('tr').find('td').eq(2).text();
        $("#account").val(currentDataAcct);
        currentDataName = btnThis.closest('tr').find('td').eq(3).text();
        $("#name").val(currentDataName);
        currentDataEmail = btnThis.closest('tr').find('td').eq(4).text();
        $("#email").val(currentDataEmail);
        currentDataAge = btnThis.closest('tr').find('td').eq(5).text();
        $("#age").val(currentDataAge);
        currentDataPhone = btnThis.closest('tr').find('td').eq(6).text();
        $("#phone").val(currentDataPhone);
        currentDataGender = btnThis.closest('tr').find('td').eq(7).text();
        $("#gender").val(currentDataGender);
        currentDataRole = btnThis.closest('tr').find('td').eq(8).text();
        $("#roleName").val(currentDataRole);
    });

  /*  $("tbody .btn-primary").click(function () {
        window.location.href = "edit.jsp?userAcct=${user.userAcct}";
    });*/
</script>
</body>
</html>
